<template>
  <el-menu
    :default-active="activeIdx"
    class="el-menu-header"
    mode="horizontal"
    @select="handleSelect"
    :background-color="variables.menuBg"
    :text-color="variables.menuText"
    :active-text-color="variables.menuActiveText"
  >
    <!-- logo Start -->
    <el-menu-item class="logo-container" disabled index="main">
      <logo-wrap />
    </el-menu-item>
    <!-- logo End -->
    <!-- subApp Start -->
    <template>
      <el-menu-item
        v-for="(item, idx) of subRoutes"
        :index="`${idx}`"
        :key="item.pressionCode"
        >{{ item.zhName }}</el-menu-item
      >
    </template>
    <!-- subApp End -->
    <!-- avatar Start -->
    <el-menu-item class="avatar-wrap" disabled index="main">
      <avatar-wrap />
    </el-menu-item>
    <!-- avatar End -->
  </el-menu>
</template>
<script>
import variables from "@/common/scss/variables.scss";
import { LogoWrap, AvatarWrap } from "./modules";
import { mapGetters } from "vuex";

/* mock 子应用路由权限码 */
const pressionList = ["1", "2", "3", "4"];
export default {
  name: "header-nav",
  components: {
    LogoWrap,
    AvatarWrap
  },
  data() {
    return {
      activeIdx: ""
    };
  },
  computed: {
    ...mapGetters(["subRoutes"]),
    variables() {
      return variables;
    },
    activeSubRoute: function() {
      return this.subRoutes[this.activeIdx];
    },
    subAppPressionList: function() {
      return this.subRoutes.map(i => i.pressionCode);
    }
  },
  watch: {
    $route: function(val) {
      this.handleRoute(val);
    }
  },
  mounted() {
    this.handleRoute(this.$route);
  },
  methods: {
    handleSelect(idx) {
      this.activeIdx = idx;
      this.$router.push(this.activeSubRoute.activeRule);
    },
    handleRoute(route) {
      let { path } = route;
      let regx = /^\/sub\/([\w]+)/i;
      let subPath = path.match(regx); //refresh 初始化activeIdx
      if (path.indexOf("/sub/") !== -1) {
        this.activeIdx = `${pressionList.indexOf(subPath[1])}`;
      } else {
        this.activeIdx = "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
li.logo-container {
  width: 210px;
  user-select: none;
  &:hover {
    background: none !important;
  }
}
li.avatar-wrap {
  float: right;
  user-select: none;
  &:hover {
    background: none !important;
  }
}

li.logo-container.is-disabled,
li.avatar-wrap.is-disabled {
  opacity: 1;
  cursor: pointer;
  background: none;
}
</style>
